<template>
  <div class="map-box">
    <div id="map_canvas" style="height: 100%; width: 100%"></div>
  </div>
</template>
<script>
/**
 * 参考文档
 * https://www.w3cschool.cn/googleditu/google-maps-events.html
 * https://developers.google.cn/maps/documentation/javascript/examples
 */
  import { getFireStatus } from '@/api/mapApi.js'
  export default {
    name: 'GGMap',
    props: {
      data: {
            type: [Object, Array],
            default: () => []  // 提供默认值
        }
      },
    data(){
        return{
          show:false,
          center: {},
          markers: [],
          normal: require('./static/img/normal_icon.png'),
          abnormal_icon: require('./static/img/abnormal_icon.png'),
          unknown_icon: require('./static/img/unknown_icon.png'),
          position: {},
          websock: null,

        }
    },
    watch: {
      // 深度监听对象
      data: {
          handler(newVal, oldVal) {
            this.setData()
          },
          deep: true, // 深度监听
          immediate: true // 立即执行一次
      },
    },
    created(){},
    mounted(){
      //初始化实例之后调用
      this.setData();
      // this.createMap()
    },
    methods:{
      // 辅助方法
      loadScript(src) {
        return new Promise((resolve, reject) => {
          const script = document.createElement('script');
          script.src = src;
          script.onload = resolve;
          script.onerror = reject;
          document.head.appendChild(script);
        });
      },
      setData(){
        this.markers = this.data.map(item=>{
          return {
            position: {lng: Number(item.lng), lat: (Number(item.lat))},
            ...item
          }
        })
        this.center = this.data.length?this.markers[0].position:{lng: 120.5, lat: 30.2};
        this.initMap()
      },
      initMap() {
        this.createMap(); // 设置回调函数为 createMap 方法，该方法将在 API 加载完成后调用。
      },
      // 图标设置
      setImage(item){
        if(item.fireStatus == 'OPEN_FIRE'){
          return this.normal
        }else if(item.fireStatus == 'CLOSE_FIRE'){
          return this.abnormal_icon
        }else if(item.fireStatus == 'UNKNOWN'){
          return this.unknown_icon
        }
        return this.normal
      },
      // 状态名称
      setFireStatus(item){
        if(item.fireStatus == 'OPEN_FIRE'){
          return '点火状态'
        }else if(item.fireStatus == 'CLOSE_FIRE'){
          return '熄火状态'
        }else if(item.fireStatus == 'UNKNOWN'){
          return '未知状态'
        }
        return ''
      },
      //  地图实例
      async createMap(){
          //创建地图实例，zoom是缩放比例
        const {ColorScheme} = await google.maps.importLibrary("core")
        let map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 13,
          center: this.center,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          colorScheme: ColorScheme.DARK,
        });
        //这里因为需要很多标记，所以遍历了this.markers（后端给的数据）来循环创建标记
        this.markers.map(item=>{
          let marker = new MarkerWithLabel({
            position: item.position,
            // icon: this.icon, //标记自定义图标
            icon: {
                url: this.setImage(item), //标记自定义图标
                size: new google.maps.Size(50, 50), // 直接在这里设置图标大小
                scaledSize: new google.maps.Size(50, 50) // 使用scaledSize也可以达到相同效果
            },
            draggable: false, //不可拖动
            map: map,   //地图实例 
            // labelContent: item.plate_number,    //label的内容
            labelAnchor: new google.maps.Point(22, 0),    //label的位置，可以调
            labelClass: "labels", // the CSS class for the label
            labelStyle: { background:'#fff0',padding:'5px' }
          });
          //点击信息窗口显示
          google.maps.event.addListener(marker, "click", (e)=> { 
            let iw = null
            iw = new google.maps.InfoWindow({
              content: `<div class="content_pop">
                          <p>车牌号：${item.plate_number}</p>
                          <p>状态：${this.setFireStatus(item)}</p>
                        </div>`
            });
            iw.close(map, marker); 
            iw.open(map, marker);
          });
        })
      },
    },
  }
</script>
<style scoped lang="scss">
.map-box {
    height: 100%;
    height: 100%;
    position: relative;
    #map_canvas{
      position: absolute;
      top: 0;
      left: 0;
    }
    ::v-deep .gm-style .gm-style-iw-c {
      background: rgba(13, 61, 119, 0.852);
      padding: 0;
    }
    ::v-deep .gm-style .gm-style-iw-tc::after{
      background: rgba(13, 61, 119, 0.852);
    }
    ::v-deep .gm-ui-hover-effect{
      width: 30px !important;
      height: 30px !important;
      -webkit-appearance: none; /* Safari and Chrome */
      -moz-appearance: none; /* Firefox */
      appearance: none; /* Standard */
      border: 0 !important;
      &::before{
        content: '×';
        color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
    ::v-deep .gm-style-iw-ch{
      padding: 0;
    }
    ::v-deep .gm-style .gm-style-iw-d {
      overflow: auto !important;
    }
    ::v-deep .gm-ui-hover-effect>span{
      display: none !important;
    }
    ::v-deep .labels {
      color: #fff; /* 文本颜色 */
      // background-color: white; /* 背景颜色 */
      font-family: "Lucida Grande", "Arial", sans-serif; /* 字体 */
      font-size: 18px; /* 字体大小 */
      font-weight: bold; /* 字体粗细 */
      text-align: center; /* 文本对齐方式 */
      // border: 1px solid black; /* 边框 */
      // border-radius: 4px; /* 边框圆角 */
      padding: 1px 6px 0px; /* 内边距 */
    }
    ::v-deep .content_pop {
      color: #fff;
      font-size: 18px;
      padding: 15px;
      padding-top: 0;
      p {
        margin: 0;
      }
    }
    // background: linear-gradient(180deg, #032750 15%, rgba(3, 41, 86, 0.4) 55%, rgba(2, 37, 76, 0) 99%);
}
</style>